<!DOCTYPE html>
<html>
<head th:include="include/head">

</head>
<body class="hold-transition sidebar-mini layout-fixed">
	<div class="wrapper">


		<div class="content-wrapper">
			<!-- Content Header (Page header) -->
			<section class="content-header">
				<div class="container-fluid">
					<div class="row mb-2">
						<div class="col-sm-6">
							<h1>角色管理</h1>
						</div>
						<div class="col-sm-6">
							<ol class="breadcrumb float-sm-right">
								<li class="breadcrumb-item"><a href="#">首页</a></li>
								<li class="breadcrumb-item active">角色管理</li>
							</ol>
						</div>
					</div>
				</div>
				<!-- /.container-fluid -->
			</section>
			<section class="content">
				<div class="card card-info">
					<div class="card-header">
						<h3 class="card-title">角色信息管理</h3>
					</div>
					<!-- /.card-header -->
					<!-- form start -->
					<form class="form-horizontal" id="form" method="post"
						th:action="@{/user/roleSave}">
						<div class="card-body">
							<div class="form-group row">
								<label for="name" class="col-sm-2 col-form-label">角色名称</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" name="name" id="name"
										placeholder="角色名称" aria-required="true">
										<label class="help-block m-b-none" for="name" id="name-error"><i class="far fa-bell"></i>必填项</label>
								</div>
							</div>
							<div class="form-group row">
								<label for="descritpion" class="col-sm-2 col-form-label">角色描述</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" name="descritpion" id="descritpion"
										placeholder="角色描述" aria-required="true">
										<label class="help-block m-b-none" for="descritpion" id="descritpion-error"><i class="far fa-bell"></i>必填项</label>
								</div>
							</div>
							<div class="form-group row">
								<label for="menuIds" class="col-sm-2 col-form-label">角色目录</label>
								<div class="col-sm-10">
									<!-- tree -->
									<div class="zTreeDemoBackground left">
										<ul id="treeDemo" class="ztree"></ul>
									</div>
									<input type="hidden" id="menuIds" name="menuIds" aria-required="true" class="form-control"/>
									<input type="hidden" id="strMenu" th:value="${strMenu}"/>
									<!-- tree end -->
									<label class="help-block m-b-none" for="menuIds" id="menuIds-error"><i class="far fa-bell"></i>必填项</label>
								</div>
							</div>
			
						</div>
						<!-- /.card-body -->
						<div class="card-footer">
							<button type="button" class="btn btn-info" id="save">保存</button>
							<button type="button" class="btn btn-default float-right"
								id="back">取消</button>
						</div>
						<!-- /.card-footer -->
					</form>
				</div>
			</section>

		</div>
	</div>
	<!-- ./wrapper -->
	<div th:include="include/foot"></div>
	<script>
	$.validator.setDefaults({
		ignore:"",
		highlight : function(a) {
			$(a).removeClass("is-valid").addClass(
					"is-invalid");
		},
		success : function(a) {
			$(a).prev().removeClass("is-invalid").addClass(
					"is-valid");
			$(a).html('<i class="fas fa-check"></i>验证成功');
		},
		errorClass:"help-block m-b-none",
// 		validClass:"help-block m-b-none",
		errorPlacement:function(a,b){
			if(b.is(":radio")||b.is(":checkbox")){
				a.appendTo(b.parent().parent().parent())
				}else{
					a.appendTo(b.parent())
					}},
					submitHandler:function(form){loadPage();form.submit();}
	});
		$().ready(function() {
			$("#back").click(function() {
				loadPage();
				location.href = 'roleList';
			});
			$("#save").click(function(){
				show();
			});
			$("#form").validate({
				rules : {
					name : "required",
					descritpion:"required",
					menuIds : "required"
				},
				messages : {
					name : '<i class="far fa-times-circle"></i>请输入角色名称',
					descritpion:'<i class="far fa-times-circle"></i>请输入角色描述',
					menuIds : '<i class="far fa-times-circle"></i>请选择角色目录'
				}
			});
		});
		
		var setting = {
			check: {
				enable: true,
				chkboxType:{ "Y" : "ps", "N" : "ps" }
			},
			data: {
				simpleData: {
					enable: true
				}
			}
		};

		
		
		var code;
		var mytree;
		var menus=new Array();
		
		$(document).ready(function(){
			let zNodes=$("#strMenu").attr('value');
			let json=eval("(" + zNodes + ")");
			mytree=$.fn.zTree.init($("#treeDemo"), setting, json);
			
		});
		
		function show(){
			var treeObj = $.fn.zTree.getZTreeObj("tree");
			var nodes = mytree.getCheckedNodes(true);
			for(var i=0;i<nodes.length;i++){
				menus.push(nodes[i].id);
			}
			
			$("#menuIds").val(menus.join(','));
			
			$("#form").submit();
		}
		loadPage=function(){
			window.parent.loadPage();
		}
	</script>
</body>
</html>